<template>
  <view class="customer-service-detail">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="问答详情"></van-nav-bar>
    <!-- #endif -->
    <view class="customer-service-detail-cnt">
      <view class="customer-service-detail-title">{{ data.problemState }}</view>
      <view class="customer-service-detail-time">{{ data.updateTime }}</view>
      <view v-html="data.answer" class="ql-editor"></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { setToastInstance, systemInfo } from '@/mixins/info';
import { questionAppDetail } from '@/service/apis/mine';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});
const data = reactive({
  answer: '',
  problemState: '',
  updateTime: '',
});

const initData = (id: string) => {
  questionAppDetail({
    id,
  }).then((res: any) => {
    data.answer = res.answer || '';
    data.problemState = res.problemState;
    data.updateTime = res.updateTime;
  });
};
onLoad((option: any) => {
  initData(option.id);
});

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>
<style lang="scss" scoped>
@import './css/vue-quill.bubble.css';
@import './css/vue-quill.core.css';
@import './css/vue-quill.snow.css';
.customer-service-detail {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  &-cnt {
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  &-title {
    color: #242424;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
  }
  &-time {
    color: #858585;
    font-size: 14px;
    line-height: 22px; /* 157.143% */
    padding-bottom: 16px;
    text-align: center;
  }
}
</style>